<template>

  <div style="padding: 10px; margin-bottom: 50px">
    <el-row>
      <el-col :span="4">
        <el-card style="width: 300px; height: 300px; color: #333">		


<!--         <div style="padding-bottom: 5px; border-bottom: 1px solid #ccc">
			 在线用户<span style="font-size: 12px">（点击聊天气泡开始聊天）</span>
			  <el-input style="padding-top: 8px; padding-bottom: 2px;"
			   placeholder="请输入发送对象" clearable @clear=""
			          v-model="input" >
					  <template #append>
					             <el-button @click="">搜索</el-button>
					            </template>
			  </el-input>

		 </div> -->
		 <div style="padding-bottom: 5px">
		 			 在线用户<span style="font-size: 12px">（点击聊天气泡开始聊天）</span>	 
		 </div>
         <div style="border-bottom: 1px solid #ccc">
			  <el-input style="padding-top: 8px; padding-bottom: 2px;"
			   placeholder="请输入发送对象" clearable @clear=""
			          v-model="input" >
					  <template #append>
					             <el-button @click="">搜索</el-button>
					            </template>
			  </el-input>

		 </div>
		  <div style="padding: 10px 0" v-for="user in users" :key="user.username">
            <span>{{ user.username }}</span>
            <i class="el-icon-chat-dot-round" style="margin-left: 10px; font-size: 16px; cursor: pointer"
               @click="chatUser = user.username"></i>
            <span style="font-size: 12px;color: limegreen; margin-left: 5px" v-if="user.username === chatUser">chatting...</span>
          </div>

        </el-card>
      </el-col>

      <el-col :span="20">
        <div style="width: 800px; margin: 0 auto; background-color: white;
                    border-radius: 5px; box-shadow: 0 0 10px #ccc">
          <div style="text-align: center; line-height: 50px;">
            当前对话（{{ chatUser }}）
          </div>
          <div style="height: 350px; overflow:auto; border-top: 1px solid #ccc" v-html="content"></div>
<!-- 		  <el-upload
		             ref="upload"
		             class="upload-demo"
		             drag
		             :auto-upload="false"
		             :file-list="fileList"
		             :http-request="httpRequest"
		             style="width: 100%;"
		             >
		      <i class="el-icon-upload"></i>
		      <div class="el-upload__text" trigger>
		          <em> 将文件拖到此处然后点击上传文件</em>
		      </div>
		  </el-upload> -->
			<div
				 class="inputContent"
				 contenteditable="true"
				 ref="inputConents">
			</div>

          <div style="height: 200px">
            <textarea v-model="text" style="height: 160px; width: 100%; padding: 20px; 
			border: none; border-top: 1px solid #ccc;
             border-bottom: 1px solid #ccc; outline: none"></textarea>

            <div >

				<el-input placeholder="请输入自动回复消息" clearable @clear="" 
				v-model="autoSend" style="display:inline;text-align: left; padding-left: 10px;" >
				<template #append>
				<el-button @click="">自动回复</el-button>
				</template>
				</el-input>
				<div style="display:inline; " >
				<el-button type="primary" size="mini" @click="">历史记录</el-button>
              <el-button type="primary" size="mini" @click="">发送</el-button>
				</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>

</template>


<script setup>
import { ref } from 'vue'
const input = ref('')
const autoSend = ref('')
</script>
<script>
export default {
  name: "SendMessage"
}
</script>

<style>
.tip {
  color: white;
  text-align: center;
  border-radius: 10px;
  font-family: sans-serif;
  padding: 10px;
  width:auto;
  display:inline-block !important;
  display:inline;
}

.right {
  background-color: deepskyblue;
}
.left {
  background-color: forestgreen;
}
</style>